.login {
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 9997;
  }
  .login-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9998;
    width: 530px;
    // height: 367px;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
    border: none;
    background-color: #fff;
    transform: translateX(-50%) translateY(-50%);
    .login-hd {
      position: relative;
      margin: 0;
      padding: 0 45px 0 18px;
      height: 39px;
      line-height: 38px;
      z-index: 10;
      border-bottom: 1px solid #191919;
      border-radius: 4px 4px 0 0;
      background: #2d2d2d;
      font-weight: bold;
      font-size: 14px;
      text-align: left;
      color: #fff;
      i {
        position: absolute;
        z-index: 20;
        top: 16px;
        right: 20px;
        width: 10px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999px;
        cursor: pointer;
        background: url(~@/assets/images/login/loginx.png);
        background-position: 0 -95px;
      }
    }
    // .login-bd {
    //   // position: relative;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: space-between;
    //   align-content: center;
    //   margin: 20px 0;
    //   // padding: 25px 40px;
    //   width: 100%;
    //   height: 270px;
    //   .bd {
    //     display: flex;
    //     justify-content: center;
    //     .cover-img {
    //       img {
    //         width: 125px;
    //         height: 220px;
    //       }
    //     }
    //     .qr-code-container {
    //       margin-left: 25px;
    //       width: 200px;
    //       text-align: center;
    //       h3 {
    //         font-size: 18px;
    //         font-weight: 500;
    //         text-align: center;
    //       }
    //       .qr-code {
    //         position: relative;
    //         width: 138px;
    //         height: 138px;
    //         padding: 4px;
    //         margin: 13px auto;
    //         .expire {
    //           position: absolute;
    //           top: 0;
    //           left: 0;
    //           width: 138px;
    //           height: 138px;
    //           background: rgba(255, 255, 255, 0.9);
    //           p {
    //             margin: 45px auto 6px;
    //             width: 100%;
    //             font-size: 12px;
    //             color: rgba(0, 0, 0, 0.8);
    //             font-weight: 500;
    //             text-align: center;
    //           }
    //           .refresh {
    //             display: block;
    //             margin: 0 auto;
    //             padding-right: 0;
    //             width: 66px;
    //             height: 26px;
    //             line-height: 24px;
    //             text-align: center;
    //             border-radius: 4px;
    //             background: linear-gradient(180deg, #81dd81 0%, #55a055 100%);
    //             border: 1px solid #5baf5b;
    //             color: #fff;
    //             font-size: 12px;
    //             &:hover {
    //               text-decoration: none;
    //             }
    //           }
    //         }
    //       }
    //       p {
    //         font-size: 12px;
    //         top: 181px;
    //         width: 200px;
    //         text-align: center;
    //         line-height: 17px;
    //         color: rgba(0, 0, 0, 0.4);
    //         a {
    //           color: #0c73c2;
    //         }
    //       }
    //     }
    //     .phone {
    //       width: 224px;
    //       padding: 0 35px 3px 40px;
    //       border-right: 1px dotted #ccc;
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: space-around;
    //       align-items: center;
    //       box-sizing: content-box;
    //       img {
    //         width: 224px;
    //         height: 120px;
    //       }
    //       a {
    //         &.register {
    //           color: #333;
    //           background-position: right -100px;
    //           div {
    //             background-position: 0 -59px;
    //           }
    //           &:hover {
    //             background-position: right -182px;

    //             div {
    //               background-position: 0 -141px;
    //             }
    //           }
    //         }
    //       }
    //     }
    //     .morelogin {
    //       padding: 3px 0 3px 39px;
    //       margin-top: -15px;
    //       ul {
    //         li {
    //           margin-top: 15px;
    //           text-align: left;
    //           a {
    //             font-size: 12px;
    //             color: #333;
    //             line-height: 38px;
    //             text-align: left;
    //             .u-icn4 {
    //               display: inline-block;
    //               vertical-align: middle;
    //               margin-right: 14px;
    //               width: 38px;
    //               height: 38px;
    //             }
    //             .wechat {
    //               background-position: -150px -670px;
    //             }
    //             .qq {
    //               background-position: -190px -670px;
    //             }
    //             .weibo {
    //               background-position: -231px -670px;
    //             }
    //             .email {
    //               background-position: -271px -670px;
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    //   .other {
    //     align-self: center;
    //     display: block;
    //     width: 118px;
    //     height: 28px;
    //     font-size: 12px;
    //     border: 1px solid #979797;
    //     border-radius: 15px;
    //     line-height: 28px;
    //     text-align: center;
    //     color: rgba(0, 0, 0, 0.8);
    //     &:hover {
    //       text-decoration: none;
    //     }
    //   }
    //   .agree {
    //     margin-top: 10px;
    //     margin-left: 50px;
    //     text-align: left;
    //     input {
    //       vertical-align: middle;
    //     }
    //     label {
    //       margin-left: 2px;
    //       color: rgba(0, 0, 0, 0.4);
    //     }
    //     a {
    //       color: #0c73c2;
    //     }
    //   }
    //   .qr-cover {
    //     position: absolute;
    //     bottom: 0;
    //     right: 0;
    //     width: 52px;
    //     height: 52px;
    //   }
    // }
    // .email-bd,
    // .phone-bd {
    //   margin: 0 auto;
    //   padding: 30px 0 43px;
    //   width: 220px;
    //   height: 224px;
    //   .ipt {
    //     position: relative;
    //     margin: 0;
    //     width: 100%;
    //     height: 30px;
    //     line-height: 30px;
    //     padding-left: 10px;
    //     border: 1px solid #cdcdcd;
    //     border-radius: 2px;
    //     z-index: 11;
    //     // box-sizing: content-box;
    //   }
    //   .email {
    //   }
    //   .pwd {
    //   }
    //   .note {
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     .auto {
    //       input {
    //         vertical-align: middle;
    //       }
    //     }
    //   }
    // }
    // .phone-bd {
    //   .code-wrap {
    //     display: flex;
    //     justify-content: space-between;
    //     #code {
    //       width: 136px;
    //     }
    //     .get-code {
    //       display: inline-block;
    //       padding: 0 5px 0 0;
    //       width: 70px;
    //       height: 31px;
    //       line-height: 31px;
    //       color: #333;
    //       overflow: hidden;
    //       vertical-align: top;
    //       text-align: center;
    //       white-space: nowrap;
    //       background-position: right -100px;
    //       box-sizing: content-box;
    //       i {
    //         display: inline-block;
    //         width: 61px;
    //         padding: 0 2px 0 7px;
    //         background-position: 0 -59px;
    //         box-sizing: content-box;
    //       }
    //     }
    //   }
    // }
    :deep(.footer){
      // position: absolute;
      // bottom: 0;
      // margin-top: 20px;
      width: 100%;
      height: 48px;
      border-top: 1px solid #c6c6c6;
      border-radius: 0 0 4px 4px;
      line-height: 48px;
      background-color: #f7f7f7;
      .to-other {
        float: left;
        margin-left: 20px;
        color: #0c72c3;
      }
      .to-register {
        float: right;
        margin-right: 20px;
        color: #999 !important;
      }
    }
  }
  :deep(.login-btn){
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0 auto;
    margin-top: 10px;
    padding: 0 5px 0 0;
    width: 219px;
    height: 31px;
    font-size: 12px;
    box-sizing: content-box;
    color: #fff;
    background-position: right -428px;
    &:hover {
      text-decoration: none;
      background-position: right -510px;
      div {
        background-position: 0 -469px;
      }
    }
    div {
      width: 184px;
      background-position: 0 -387px;
      padding: 0 15px 0 20px;
      height: 100%;
      line-height: 31px;
      text-align: center;
      box-sizing: content-box;
    }
  }
}
